<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/element-plus.css"/>
    <style>
        <!--
        element-plus 的组件新增样式 .组件名-- >
        .el-button {
            color: red;
        }

        .el-row {
            background-color: #67c23a;
        }

        .el-header {
            height: 40px;
            background-color: #337ecc;
        }
        .el-aside {
            height: 900px;
            width: 80px;
            background-color: #73767a;
        }
    </style>
</head>
<body>
<div id="app">
    <!--el-button 组件 在element-plus中有非常多这样的组件-->
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <br/>
    <!--el-row 变成flex布局 el-col :span属性来控制占几个格子-->
    <!-- bootstrap row col-2 -->
    <el-row>
        <el-col :span="span">
            <div class="grid-content ep-bg-purple-dark">我占了24个格子</div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12" :offset="6">
            <div class="grid-content ep-bg-purple-dark">我占了12个格子</div>
        </el-col>
    </el-row>
    <!--el-container 外层容器 里面包含el-header/el-footer 布局变成上下-->
    <!--el-header 顶部导航-->
    <!--el-aside 侧边栏-->
    <!--el-main 主要内容区域-->
    <!--el-footer 底部区域-->
    <el-container>
        <el-header>顶部导航栏</el-header>
        <el-container>
            <el-aside>侧边栏</el-aside>
            <el-container>
                <el-main>主要内容</el-main>
                <el-footer>页脚</el-footer>
            </el-container>
        </el-container>
    </el-container>
</div>
<script src="./js/vue.js"></script>
<script src="./js/element-plus.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                span: 20
            }
        },
        methods: {}
    })
    // 使用 element-plus 的组件库
    app.use(ElementPlus)
    app.mount("#app")
</script>
</body>
</html>